<template>
	<view class="quit">
		<view class="apply-list">
			<view @click="clickMore" class="check-more-btn">
				<view class="more-line"></view>
				<text>申请记录</text>
			</view>
		</view>
		<view class="quit-header">
			<view>
				<person-infrom :propName='personSalar.psnname' :propNum='personSalar.psncode' propDepartment=''>
				</person-infrom>
				<view class="base-inform">
					<!-- <view class="work-typeInform">
						<view class="time-titel">性别: </view>
						<view class="time-value">男</view>
					</view> -->
					<view class="work-typeInform">
						<view class="time-titel">到院时间: </view>
						<view class="time-value">{{personSalar.begindate}}</view>
					</view>
					<!-- <view class="work-typeInform">
						<view class="typeInform-title">现任职称: </view>
						<view class="typeInform-value">主治医师</view>
					</view>
					<view class="work-typeInform">
						<view class="typeInform-title">现任技术职务: </view>
						<view class="typeInform-value">主治医师</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="apply-time-wrap" @click="chioceDate">
			<view class="apply-tips">申请时间</view>
			<view class="apply-time">{{form.apply_date}}</view>
		</view>
		<itmister-date-picker ref="child" @dateConfirm="confirmPicker" :ishalf='false'></itmister-date-picker>
		<view class="leave-reason-wrap2 ">
			<view class="wrap-tips">离职原因</view>
			 <view class="content" @click="useOutClickSide">
			        <feitui-select ref="feituiSelect" size="medium" :value="formView.sreason" @selectOne="selectOne" :options='reasonOptions'></feitui-select>
			</view>
		</view>
		<view class="leave-reason-wrap">
			<view class="wrap-tips">离职说明</view>
			<view class="reason-textarea">
				<uni-easyinput type="textarea" placeholder="请描述请假事由" v-model="form.memo"></uni-easyinput>
			</view>
		</view>
		<view class="confirm-btn">
			<my-button width="540" height="88" @click='aviceQuit'>提交</my-button>
		</view>
	</view>
</template>

<script>
	import service from '../../common/service/new_file.js'
	import apiData from '../../common/utils/apiData.js'
	export default {
		data() {
			return {
				personSalar: {
					psnname:'',
					psncode:''
				},
				form: {
					apply_date: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
					sreason: '',
					memo:''
				}, //假期的表单提交
				formView:{
					sreason:'',
				},
				reasonOptions:[],
				exampleReason: [{
						value: '个人原因',
						activeColor: true
					},
					{
						value: '单位调动',
						activeColor: true
					},
					{
						value: '其他',
						activeColor: true
					},
				]

			}
		},
		methods: {
			clickMore() {
				uni.navigateTo({
					url: './quitRecord/quitRecord'
				});
			},
			formRule(){
				console.log()
				if(this.form.sreason ==''){
					uni.showToast({
						icon:'none',
						title:'请选择离职原因'
					})
					return false
				}else{
					return true
				}
			},
			selectOne(value){
				this.form.sreason = value.value
				this.formView.sreason = value.label
				console.log(value)
			},
			clickExample(item, index) {
				this.exampleReason.forEach(el => {
					el.activeColor = true
				})
				this.form.reason = item.value
				this.exampleReason[index].activeColor = false
			},
			chioceDate() {
				this.$refs.child.show()
			},
			confirmPicker(e) {
				console.log(e)
				this.form.apply_date = e.date
			},
			aviceQuit() {
				console.log(this.formRule())
				let _this = this
				let head = {
					apply_date:this.form.apply_date,
					sreason:this.form.sreason,
					memo:this.form.memo
				}
				if(this.formRule()){
					let data = apiData.setQuitData(head)
					service.common(data,{
						success:function(res){
							uni.showToast({
								title:'提交成功'
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'./quitRecord/quitRecord'
								})
							},500)
						}
					})
				}
			},
			getQuitReason() {
				let _this = this
				let data = apiData.setQuitReason()
				service.common(data,{
					success:(res)=>{
						let newArr = []
						let quitReasonObj = res.data.VALUES[0]
						for (let key in quitReasonObj) {
							newArr.push({
								label:quitReasonObj[key],
								value:key
							})
						}
						this.reasonOptions  = newArr 
					}
				})
			},
		},
		onReady() {
			this.personSalar = {
				psnname: JSON.parse(uni.getStorageSync('user')).user_name,
				psncode: JSON.parse(uni.getStorageSync('user')).user_code,
				begindate:JSON.parse(uni.getStorageSync('user')).begindate
			}
			this.getQuitReason()
		}
	}
</script>

<style scoped lang="scss">
	
	.apply-list{
		display: flex;
		flex-direction: row-reverse;
	}
	.quit {
		padding: 0 36rpx;
	}
	.leave-reason-wrap2 {
		display: flex;
		align-items: center;
		margin: 40rpx 0 ;
		color: #454a5e;
		.wrap-tips {
			font-weight: 400;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
	}

	.quit-header {
		display: flex;

		.base-inform {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #A7A3A3;

			.join-time {
				display: flex;

				.time-titel {
					margin-right: 10rpx;
				}
			}

			.work-typeInform {
				display: flex;
				margin-top: 10rpx;

				.typeInform-value {
					margin-left: 10rpx;
					color: #0089FF;
				}
			}
		}
	}

	.apply-time-wrap {
		margin-top: 60rpx;
		padding: 0 20rpx;
		height: 172rpx;
		border-radius: 20rpx;
		background: #F7F7F7;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.apply-tips {
			font-size: 24rpx;
			color: #808080;
		}

		.apply-time {
			font-size: 56rpx;
			color: #000000;
		}
	}

	.leave-reason-wrap {
		color: #454a5e;
		.wrap-tips {
			font-weight: 400;
			font-size: 28rpx;
			padding-bottom: 12rpx;
		}

		.example-leave {
			display: flex;
			margin-bottom: 10rpx;
		}
	}

	.confirm-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 400rpx;
	}
	.check-more-btn {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: 35rpx;
		color: #007AFF;
		justify-content: flex-end;
		.more-line{
			width: 10rpx;
			height: 40rpx;
			background: #007AFF;
			border-radius: 6rpx;
			margin: 0 10rpx;
		}
	}
</style>
